<template>
	<view class="app-container boardgame-page">
		<!-- 搜索栏 -->
		<u-search placeholder="请输入搜索内容" v-model="keyword" shape="square" animation="false" height="40"></u-search>

		<!-- 热门推荐 -->
		<view class="hot-recommend-wrapper">
			<view class="recommend-title">
				<view class="app-title">热门推荐</view>
				<view class="app-more">查看全部</view>
			</view>
			<scroll-view scroll-x>
				<view class="recommend-list">
					<view class="recommend-item" v-for="item in recommendList" :key="item.name" @click="toBoardgame(item.id)">
						<view class="recommend-image">
							<image :src="item.picture" mode="widthFix"></image>
						</view>
						<view class="recommend-info">
							<view class="recommend-name">{{ item.name }} <u-tag :text="item.tag" size="mini"
									:bgColor="themeColor" :borderColor="themeColor"></u-tag></view>
							<view class="recommend-desc">
								<view class="recommend-desc-item">{{ item.difficulty }}</view>
								<view class="recommend-desc-item">{{ item.players }}</view>
								<view class="recommend-desc-item">{{ item.time }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 排行榜TOP3 -->
		<view class="top3-wrapper">
			<view class="top3-title">
				<view class="app-title">排行榜TOP3</view>
			</view>
			<view class="top3-list">
				<view class="top3-item" v-for="(item, index) in top3List" :key="item.name" @click="toBoardgame(item.id)">
					<view class="rank">#{{ index + 1 }}</view>
					<image :src="item.picture" class="top3-image"></image>
					<view class="top3-info">
						<view class="top3-name">{{ item.name }}<u-tag :text="item.tag" size="mini" :bgColor="themeColor"
								:borderColor="themeColor"></u-tag></view>
						<u-rate :value="item.point / 2" :active-color="themeColor" inactive-color="#999" size="14"
							readonly allowHalf></u-rate>
						<view class="top3-desc">
							<view class="top3-desc-item"><u-icon name="tags" color="#999"
									size="14"></u-icon>{{ item.difficulty }}</view>
							<view class="top3-desc-item"><u-icon name="account" color="#999"
									size="14"></u-icon>{{ item.players }}</view>
							<view class="top3-desc-item"><u-icon name="clock" color="#999"
									size="14"></u-icon>{{ item.time }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 全部游戏 -->
		<view class="all-game-wrapper">
			<view class="all-game-title">
				<view class="app-title">全部游戏</view>
				<view class="app-more">更多</view>
			</view>
			<view class="all-game-list">
				<view class="all-game-item" v-for="item in gameList" :key="item" @click="toBoardgame(item.id)">
					<view class="all-game-image">
						<image :src="item.picture" mode="widthFix"></image>
					</view>
					<view class="all-game-info">
						<view class="all-game-name">{{ item.name }}<u-tag :text="item.tag" size="mini"
								:bgColor="themeColor" :borderColor="themeColor"></u-tag></view>
						<u-rate :value="item.point / 2" :active-color="themeColor" inactive-color="#999" size="14"
							readonly allowHalf></u-rate>
						<view class="all-game-desc">
							<view class="all-game-desc-item">{{ item.difficulty }}</view>
							<view class="all-game-desc-item">{{ item.players }}</view>
							<view class="all-game-desc-item">{{ item.time }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<Tabbar :active="3"></Tabbar>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			images: [],
			recommendList: [], // 推荐游戏列表
			top3List: [], // top3游戏列表
			gameList: [], // 全部游戏列表
		};
	},
	mounted() {
		this.getBoardgameList();
	},
	methods: {
		toBoardgame(id) {
			uni.navigateTo({ url: `/pages/Boardgame/Boardgame/Boardgame?id=${id}`})
		},
		async getBoardgameList() {
			let difficultyMap = {
				'EASY': '简单',
				'MEDIUM': '中等',
				'HARD': '困难',
			}
			const res = await request(`/game/page`);
			let gameList = res.data.list;
			// 全部游戏
			gameList = gameList.map(item => {
				return {
					...item,
					difficulty: difficultyMap[item.difficulty],
					tag: item.types.split('|')[0]
				}
			})
			this.gameList = gameList;
			// 前五个推荐游戏
			let recommendList = [...gameList]
			this.recommendList = recommendList.sort((a, b) => b.hot - a.hot).slice(0, 5);
			// TOP3游戏
			let top3List = [...gameList]
			this.top3List = top3List.sort((a, b) => b.point - a.point).slice(0, 3);
		}
	}
};
</script>

<style lang="scss">
.boardgame-page {

	// 搜索栏
	.u-search {
		width: 100%;
	}

	// 热门推荐
	.hot-recommend-wrapper {
		width: 100%;

		.recommend-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
		}

		.recommend-list {
			display: flex;
			gap: 20rpx;
			overflow-x: scroll;
			width: max-content;
			padding: 10rpx 0;

			.recommend-item {
				width: 300rpx;
				border-radius: 25rpx;
				box-shadow: 0 3rpx 9rpx #eee;
				overflow: hidden;

				.recommend-image {
					width: 100%;
					height: 200rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.recommend-info {
					display: flex;
					flex-direction: column;
					padding: 20rpx;
					background-color: #fff;

					.recommend-name {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: bold;
						gap: 10rpx;
					}

					.recommend-desc {
						display: flex;
						justify-content: space-between;

						.recommend-desc-item {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}
	}

	// top3
	.top3-wrapper {
		width: 100%;

		.top3-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
		}

		.top3-list {
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.top3-item {
				margin-bottom: 20rpx;
				display: flex;
				align-items: flex-start;

				.rank {
					color: $theme-color;
					font-size: 48rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}

				.top3-image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 25rpx;
					object-fit: contain;
					margin: 0 10rpx;
				}

				.top3-info {
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 20rpx;
					font-size: $font-size-base;
					gap: 10rpx;

					.top3-name {
						font-size: 32rpx;
						font-weight: bold;
						display: flex;
						align-items: center;
						gap: 10rpx;
					}

					.top3-desc {
						display: flex;
						color: #999;
						gap: 15rpx;

						.top3-desc-item {
							display: flex;
							align-items: center;
							gap: 10rpx;
						}
					}
				}
			}
		}
	}

	// 全部游戏
	.all-game-wrapper {
		width: 100%;

		.all-game-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
		}

		.all-game-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx 40rpx;

			.all-game-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;
				box-shadow: 0 3rpx 9rpx #eee;
				border-radius: 25rpx;
				overflow: hidden;

				.all-game-image {
					width: 100%;
					min-height: 250rpx;
					height: 250rpx;
					max-height: 250rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.all-game-info {
					display: flex;
					flex-direction: column;
					background-color: #fff;
					font-size: $font-size-base;
					padding: 0 20rpx;
					width: calc(100% - 40rpx);
					gap: 10rpx;


					.all-game-name {
						font-size: 32rpx;
						font-weight: bold;
						display: flex;
						align-items: center;
						gap: 10rpx;
					}

					.all-game-desc {
						display: flex;
						margin-left: 5rpx;
						color: #999;
						gap: 20rpx;

						.all-game-desc-item {
							display: flex;
							align-items: center;
							gap: 10rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
}
</style>
